<template>
    <div style="background: #fff; width: 100%; height: 100%">
        <div>
            <div class="QueryList">
                <div class="QueryItem">
                    授权码：
                    <el-input placeholder="请输入内容" v-model="QueryInfo.authCode" clearable> </el-input>
                </div>

                <div class="QueryItem">
                   授权码状态：
                    <el-select v-model="QueryInfo.authCodeStatus" placeholder="请选择">
                        <el-option v-for="(item, index) in NumberStatusList" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>

                <div class="QueryItem">
                    <div style="margin-right: 15px">
                        <el-button type="primary" @click="query">查询</el-button>
                    </div>
                    <div style="margin-right: 15px">
                        <el-button type="danger" @click="reset">清空</el-button>
                    </div>
                    <div style="margin-right: 15px">
                        <el-button type="info" @click="exportExcel">导出</el-button>
                    </div>
                    <div style="margin-right: 15px">
                        <el-button type="primary" @click="generate">生成</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div style="padding: 0 15px">
            <el-table :data="tableData" border style="width: 100%" v-loading="loading">
                <el-table-column fixed prop="id" label="授权码ID"> </el-table-column>
                <el-table-column fixed prop="authCode" label="授权码"> </el-table-column>
                <el-table-column fixed prop="genTime" label="生成时间" :formatter="dateConversion"> </el-table-column>
                <el-table-column fixed prop="occupyTime" label="占用时间" :formatter="dateConversion"> </el-table-column>
                <el-table-column fixed prop="invalidTime" label="作废时间" :formatter="dateConversion"> </el-table-column>
                <el-table-column fixed prop="authCodeStatus" label="状态">
                    <template slot-scope="scope">
                        <div style="display: flex">
                            {{ getstatus(scope.row.authCodeStatus) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="userName" label="关联用户姓名"> </el-table-column>
                <el-table-column fixed prop="userPhone" label="关联用户手机号"> </el-table-column>

                <el-table-column fixed="right" label="操作" width="180">
                    <template slot-scope="scope">
                        <div style="display: flex">
                            <el-button type="danger" @click="cancellation(scope.row)">作废</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px; display: flex; justify-content: flex-end">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total_record"
                >
                </el-pagination>
            </div>
        </div>
        <!-- 生成授权码弹窗 -->
        <batchGeneration ref="batchGeneration" @batchgen="batchgen"></batchGeneration>
        <!-- 作废授权码二次确认弹窗 -->
        <el-dialog title="作废授权码" :visible.sync="dialogTableVisible" width="400px">
            <div class="text" style="margin-bottom: 20px">请确认是否作废该条授权码？</div>
           
            <el-alert
            v-if="this.checkInfo.userName||this.checkInfo.userPhone"
                :title="`该授权码已被 ${this.checkInfo.userName} ${this.checkInfo.userPhone} 用户占用,如作废该用户不可登录`"
                type="warning"
                show-icon
                :closable="false"
            >
            </el-alert>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" :loading="confirmLoading" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import batchGeneration from './component/batchGeneration.vue';
import request from '@/utils/request';
export default {
    computed: {
        // 日期格式转换
        dateConversion() {
            return (row, column) => {
                if (row[column.property] || (typeof row[column.property] === 'string' && row[column.property] !== '')) {
                    return new Date(row[column.property]).toLocaleString().replace(/\//g, '-');
                } else {
                    return row[column.property];
                }
            };
        }
    },
    methods: {
        handleClick(row) {
            console.log(row);
        },
        handleSizeChange(e) {
            this.pageSize = e;
            this.getList();
        },
        handleCurrentChange(e) {
            this.pageNum = e;
            this.getList();
        },
        exportExcel() {
            const obj = {};
            const querylist = Object.keys(this.QueryInfo);
            for (let i = 0; i < querylist.length; i++) {
                if (this.QueryInfo[querylist[i]]) {
                    if (querylist[i] == 'orderAmount') {
                        if (this.QueryInfo[querylist[i]].start && this.QueryInfo[querylist[i]].end) {
                            obj[querylist[i]] = this.QueryInfo[querylist[i]];
                        }
                    } else {
                        obj[querylist[i]] = this.QueryInfo[querylist[i]];
                    }
                }
            }
            obj.pageNum = this.pageNum
            obj.pageSize = this.pageSize
            console.log(obj);
            request({
                url: `/admin/auth-code/v1/list-export`,
                method: 'post',
                data: obj,
                responseType: 'blob'
            }).then((res) => {
                console.log(res);
                let url = window.URL.createObjectURL(res);
                // 文件名
                let fileName = '授权码';
                const a = document.createElement('a');
                a.setAttribute('href', url);
                a.setAttribute('download', fileName);
                document.body.append(a);
                a.click();
                document.body.removeChild(a);
            });
         },
        getList() {
            this.loading = true;
            const obj = {}
            const queryListItem = Object.keys(this.QueryInfo)
            for (let i = 0; i < queryListItem .length; i++) {
               if (this.QueryInfo[queryListItem[i]]) {
                obj[queryListItem[i]] = this.QueryInfo[queryListItem[i]]
               }
            }
            this.$store
                .dispatch('UserAuthorization/getList', {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    ...obj
                })
                .then((res) => {
                    this.tableData = res.data.current_data;
                    this.total_record = res.data.total_record;
                    this.loading = false;
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        // 查询
        query() {
            this.pageNum = 1;
            this.getList();
        },
        // 清空
        reset() {
            this.pageNum = 1;
            Object.keys(this.QueryInfo).forEach((item) => {
                this.QueryInfo[item] = '';
            });
            this.getList();
        },
        generate() {
            this.$refs.batchGeneration.dialogFormVisible = true;
            this.$refs.batchGeneration.page = 1;
            this.$refs.batchGeneration.pageSize = 10;
            this.$refs.batchGeneration.num = 0;
            // this.$refs.batchGeneration.tableData = [];
        },
        // 作废
        cancellation(row) {
            console.log('row', row);
            Object.keys(this.checkInfo).forEach((item) => {
                this.checkInfo[item] = row[item];
            });
            this.dialogTableVisible = true;
        },
        // 作废二次确定
        confirm() {
            this.confirmLoading = true;
            this.$store
                .dispatch('UserAuthorization/Invalidate', this.checkInfo.id)
                .then((res) => {
                    if (res.code == 0) {
                        this.$message({
                            message: '授权码作废成功',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: '授权码作废失败，请稍后再试',
                            type: 'error'
                        });
                    }
                    this.dialogTableVisible = false;
                    this.getList();
                    this.confirmLoading = false;
                })
                .catch((err) => {
                    this.$message({
                        message: '授权码作废失败，请稍后再试',
                        type: 'error'
                    });
                    this.dialogTableVisible = false;
                    this.confirmLoading = false;
                });
        },
        getstatus(e) {
            switch (e) {
                case 'AVAILABLE':
                    return '可用';
                case 'INVALID':
                    return '作废';
                default:
                    return "占用"
            }
        },
        batchgen() { 
            this.pageNum = 1;
            this.getList();
        }
    
    },

    data() {
        return {
            loading: false,
            dialogTableVisible: false,
            confirmLoading: false,
            tableData: [
                {
                    Time1: '2016-05-02',
                    Time2: '2012-05-02',
                    Time3: '2011-05-02',
                    ID: '1',
                    Username: '张三',
                    UserPhone: '18226625596',
                    Status: '作废',
                    Number: 'ksadnoans'
                },
                {
                    Time1: '2016-05-02',
                    Time2: '2012-05-02',
                    Time3: '2011-05-02',
                    ID: '2',
                    Username: '张三',
                    UserPhone: '18226625596',
                    Status: '占用',
                    Number: 'ksadnoan123s'
                },
                {
                    Time1: '2016-05-02',
                    Time2: '2012-05-02',
                    Time3: '2011-05-02',
                    ID: '3',
                    Username: '张三',
                    UserPhone: '18226625596',
                    Status: '待用',
                    Number: 'ksadnoans123123'
                }
            ],
            QueryInfo: {
                authCode: '',
                authCodeStatus: ''
            },
            NumberStatusList: [
                {
                    value: 'AVAILABLE',
                    label: '可用'
                },
                {
                    value: 'OCCUPIED',
                    label: '占用'
                },
                {
                    value: 'INVALID',
                    label: '作废'
                }
            ],
            OrderNumberList: [
                {
                    value: '1',
                    label: '全部'
                },
                {
                    value: '2',
                    label: '正序'
                },
                {
                    value: '2',
                    label: '倒叙'
                }
            ],
            NumberTypeList: [
                {
                    value: '1',
                    label: '授权码兑换注册'
                },
                {
                    value: '2',
                    label: '注册'
                }
            ],
            NumberLeveList: [
                {
                    value: '1',
                    label: '授权码级别'
                },
                {
                    value: '2',
                    label: '一级'
                },
                {
                    value: '3',
                    label: '二级'
                },
                {
                    value: '4',
                    label: '三级'
                }
            ],
            pageNum: 1,
            pageSize: 10,
            // 作废选中信息
            checkInfo: {
                authCode: '',
                authCodeStatus: '',
                genTime: '',
                id: '',
                invalidTime: '',
                occupyTime: '',
                userId: '',
                userName: '张三',
                userPhone: '12345'
            },
            total_record: 0
        };
    },
    mounted() {
        this.getList();
    },
    components: {
        batchGeneration
    }
};
</script>
<style scoped>
.QueryList {
    display: flex;
    padding-left: 30px;
}

.QueryItem {
    display: flex;
    height: 80px;
    width: 260px;
    align-items: center;
    white-space: nowrap;
    margin-right: 25px;
}
</style>